<template>
	<view class="lqq-custom" :style="{'height':height?height:(customBar+'px')}">
		<view @tap.stop="double_click" class="lqq-custom-content"
			:class="{'between':mode === 'between','default':mode === 'default'}"
			:style="{'padding-top':statusBar+'px','background':background,'position':(fixed?fixed:'relative'),'border-bottom':borderBottom,zIndex,height:customBar+'px',width:'100%'}">
			<view class="lqq-left" :style="{'color':backColor}">
				<view class="lqq-left-content">
					<view @click="goback" v-if="!hiddenBack&&!isHome" class="iconfont icon-left qq-left-block"></view>
					<view @click="goback" v-else-if="!hiddenBack && isHome" class="iconfont icon-home qq-left-block">
					</view>
					<slot name="left"></slot>
				</view>
			</view>
			<view class="lqq-center" :style="{'color':titleColor,'font-weight':titleBold?'600':'400'}">
				<text class="lqq-center-title">{{title||''}}</text>
				<slot name="center"></slot>
			</view>
			<view class="lqq-right">
				<view class="lqq-right-content">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'custom',
		data() {
			return {
				customBar: getApp().globalData.customBar,
				statusBar: getApp().globalData.statusBar,
				customHeight: getApp().globalData.custom.height || (getApp().globalData.custom.bottom - getApp().globalData
					.custom.top) || 0,
				qqq: 0,
				isHome: false,
			};
		},
		props: {
			//是否固定，不会随着页面滚动
			fixed: {
				type: String,
				default: 'fixed'
			},
			//整个导航栏的高度决定是否占高
			height: {
				type: String,
				default: ''
			},
			//背景色，background属性
			background: {
				type: String,
				default: '#FFFFFF'
			},
			//显示模式 default
			mode: {
				type: String,
				default: 'between'
			},
			//中部标题
			title: {
				type: String,
				default: ''
			},
			//标题样式颜色
			titleColor: {
				type: String,
				default: '#000'
			},
			//返回按钮样式颜色
			backColor: {
				type: String,
				default: '#000'
			},
			//隐藏返回按钮
			hiddenBack: {
				type: Boolean,
				default: false
			},
			// 是否用自己的返回按钮
			pageBack: {
				type: Boolean,
				default: false
			},
			//显示下边框
			borderBottom: {
				type: String,
				default: 'none',
			},
			titleBold: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: Number,
				default: 100,
			}

		},
		methods: {
			goback() {
				if (this.pageBack) {
					this.$emit('goback')
				} else {
					uni.navigateBack({
						fail: () => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					});
				}
			},
			//双击头部返回顶部
			double_click() {
				if (this.qqq === undefined) this.qqq = 0;
				this.qqq++;
				clearTimeout(this.timer1);

				this.timer1 = setTimeout(() => {
					if (this.qqq !== 0) {
						this.qqq = 0;
					}
				}, 500);
				this.qqq++;
				if (this.qqq == 2) {
					uni.pageScrollTo({
						duration: 200,
						scrollTop: 0
					});
					this.qqq = 0;
				}

			}
		},
	}
</script>

<style>
	.lqq-custom {
		box-sizing: border-box;
		width: 100%;
	}

	.lqq-custom-content {
		height: 100%;
		box-sizing: border-box;
	}

	.lqq-custom-content.between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.lqq-custom-content.default {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.lqq-left,
	.lqq-right {
		position: relative;
	}

	.lqq-custom-content.between .lqq-left-content {
		position: absolute;
		display: flex;
		align-items: center;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.lqq-custom-content.between .lqq-right-content {
		position: absolute;
		display: flex;
		align-items: center;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.lqq-center {
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.lqq-center-title {
		max-width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.default .lqq-center {
		flex: 1;
		overflow: hidden;
	}



	.qq-left-block {
		width: 60rpx;
		height: 60rpx;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		margin-left: 10rpx;
		font-size: 34rpx;
	}

	.icon-home {
		font-weight: bold;
	}

	.qq-left-block:active {
		background-color: rgba(0, 0, 0, 0.06);
	}
</style>